<template>
  <div>
    <header>
      <div class="left-theme">
        <div class="iconbox"><i class="iconfont icon-renyuanzu-shi"></i></div>
        <h2>智慧物业管理系统</h2>
      </div>
      <div class="right-user">
        <!-- <div class="message"><i class="iconfont icon-lingdang"><span>11</span></i></div> 
        -->
        <!-- 消息通知栏组件 -->
        <a-popover placement="bottomRight" trigger="click">
          <template slot="content">
            <HeaderChildmessage />
          </template>

          <a-button class="messagebtn"><i class="iconfont icon-lingdang"><span>11</span></i></a-button>
        </a-popover>
        <!-- 用户名 -->
        <a-popover placement="bottom" :getPopupContainer="triggerNode => {
          return triggerNode.parentNode
        }" trigger="click" class="ju">
          <template slot="content">
            <div class="userbtnbox">

              <a @click="Personalcenter">
                <i class="iconfont icon-gerenzhongxin"></i>
                <span>个人中心</span>
              </a>

              <a @click="SwitchingArea">
                <i class="iconfont icon-qiehuanxiangmu"></i>
                <span>切换小区</span>
              </a>

              <a @click="Logout">
                <!-- 跳转login 进行路由拦截 弹框询问 -->
                <i class="iconfont icon-tuichu-2"></i>
                <span>退出系统</span>
              </a>

            </div>
          </template>
          <a-button class="userbtn">
            <img :src="user.HeadPortrait" />
            <span>{{ user.name }}</span>
          </a-button>
        </a-popover>
        <!-- <div class="user">
          <img :src="user.HeadPortrait" />
          <span>{{user.name}}</span>
        </div> -->
      </div>
    </header>
  </div>
</template>

<script>
// 引入组件消息通知框
import HeaderChildmessage from '@/components/public/HeaderChildmessage'
export default {
  name: "HeaderComponent",
  data() {
    return {
      user: {
        name: "七尾",
        HeadPortrait: 'https://cdn3.axureshop.com/demo/2033334/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/__80px_u3446.svg'

      }
    };
  },
  components: {
    HeaderChildmessage
  },
  mounted() {
    let userinfo = JSON.parse(window.localStorage.getItem('userInfo'))
    // console.log(userinfo)
    this.user.name = userinfo.uname

  },


  methods: {
    //个人中心
    Personalcenter() {
      this.$router.push('/PersonalDetails')
    },
    //退出登录
    Logout() {
      //删除token并退出
      window.localStorage.removeItem("token")
      this.$router.replace("/login")
    },
    //切换小区
    SwitchingArea() {
      this.$router.push('/communitylist')
    }
  },
};
</script>

<style lang="less" scoped>
header {
  width: 100%;
  height: 50px;
  background-color: #001529;
  color: #fff;
  display: flex;
  padding: 0 20px;
  justify-content: space-between;
  align-items: center;

  .left-theme {
    display: flex;
    align-items: center;

    .iconbox {

      width: 35px;
      height: 35px;
      background-color: #0A7CFF;
      border-radius: 50%;
      text-align: center;
      line-height: 35px;
      margin-right: 10px;

      i {
        font-size: 26px;
      }

    }

    h2 {
      color: #fff;
      font-size: 20px;
    }
  }

  .right-user {
    display: flex;
    width: 160px;
    justify-content: space-between;

    .messagebtn,
    .userbtn {
      height: 50px;
      padding: 0;
      background-color: transparent;
      border: none;
      color: #fff;
    }



    .messagebtn {
      i {
        position: relative;
        font-size: 30px;


        span {
          position: absolute;
          color: #fff;
          font-size: 10px;
          background-color: #F46363;
          border-radius: 50%;
          width: 20px;
          height: 20px;
          line-height: 20px;
          right: -1px;
          top: 5px;


        }
      }


    }

    .userbtn {
      width: 100px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
  }

  /deep/.ant-popover-inner-content {
    padding: 10px 0;
    box-sizing: border-box;

    a {
      width: 150px;
      text-align: center;
      margin-bottom: 5px;
      color: #000;
      // display: block;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      height: 40px;
      line-height: 40px;


    }

    a:first-child {
      i {
        font-size: 20px;
      }
    }

    a:last-child {
      margin-right: 0;
    }

    a:hover {
      background-color: #f5f5f5;
    }
  }

}


#components-popover-demo-placement .ant-btn {
  width: 70px;
  text-align: center;
  padding: 0;
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>